import { useIntersectionObserver } from "@vueuse/core";

export const lazyPlugin = {
  install(app: {
    directive: (
      arg0: string,
      arg1: { mounted: (el: any, binding: any) => void }
    ) => void;
  }) {
    //自定义全局指令
    app.directive("img-lazy", {
      mounted: (el, binding) => {
        //el:指令绑定的元素
        //binding:指令的参数 binding.value
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          console.log(isIntersecting);
          if (isIntersecting) {
            el.src = binding.value;
            stop();//停止监听
          }
        });
      },
    });
  },
};
